<script lang="ts" setup>
import * as echarts from 'echarts/core'
import { onMounted } from 'vue'
import { ref } from 'vue'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components'
import { PieChart } from 'echarts/charts'
import { LabelLayout } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'

echarts.use([
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout
])

const myChart = ref<HTMLElement>() //也可以用const myChart = ref<any>();
const myCharts = ref<any>()
onMounted(() => {
  myCharts.value = echarts.init(myChart.value!)
  myCharts.value.setOption({
    title: {
      text: '微生活记录',
      subtext: '记录你的每一份每一秒',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      // orient: 'vertical',
      // right: '10',
      bottom: '20'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 1048, name: '体育咨询' },
          { value: 735, name: '娱乐' },
          { value: 580, name: '短视频' },
          { value: 484, name: '游戏' },
          { value: 300, name: '生活家居' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  })
  myCharts.value.resize()
})
</script>
<template>
  <div ref="myChart" :style="{ width: '100%', height: '500px' }"></div>
</template>
